<template>
	<!-- 页面导航栏 -->
	<u-navbar :title="pageTitle" :border-bottom="false" title-size="28" title-color="#333"></u-navbar>
	
	<view class="allocateDetail-container">
		<!-- 充电宝/柜机总数 -->
		<view class="total-box">
			<text class="total-box-text">{{ routeParams.allocateType == 'device' ? '机柜总数：' : '充电宝总数：' }}</text>
			<text class="total-box-num">{{ routeParams.num }}</text>
		</view>

		<!-- 详情盒子 -->
		<view v-for="(item, index) in AllocationRecordDetail" :key="index" class="detail-box">
			<!-- 柜机详情专属头部 -->
			<view v-if="routeParams.allocateType == 'device'" class="device-headerBox">机柜SN：{{ item.deviceId }}</view>

			<!-- 详情盒子 -->
			<view v-if="routeParams.allocateType == 'powerBank' || (routeParams.allocateType == 'device' && item.singleVos.length)" class="infoBox">
				<!-- 详情公共title -->
				<view v-if="routeParams.allocateType == 'powerBank' || (routeParams.allocateType == 'device' && item.singleVos.length)" class="detail-title detailRow">
					<view class="rowItem">充电宝SN</view>
					<!-- <view v-if="routeParams.allocateType == 'device'" class="rowItem">绑定机柜</view> -->
					<!-- <view v-if="routeParams.allocateType == 'powerBank'" class="rowItem">柜机SN</view> -->
					<view class="rowItem">状态</view>
				</view>
				<view v-if="routeParams.allocateType == 'device' && item.singleVos.length">
					<view v-for="(singleItem, singleIndex) in item.singleVos" :key="singleIndex" class="detailRow">
						<view class="rowItem">{{ singleItem.singleSn }}</view>
						<!-- <view class="rowItem">{{ singleItem.deviceId }}</view> -->
						<view
							:class="{
								rowItem: true,
								hasBinding: singleItem.status == '已绑定',
								abnormal: singleItem.status == '异常',
								unBinding: singleItem.status == '未绑定'
							}"
						>
							<text v-if="singleItem.status == '已绑定'">已绑定</text>
							<text v-if="singleItem.status == '未绑定'">未绑定</text>
							<text v-if="singleItem.status == '异常'">异常</text>
						</view>
					</view>
				</view>
				<view v-if="routeParams.allocateType == 'powerBank'">
					<view class="detailRow">
						<view class="rowItem">{{ item.singleSn }}</view>
						<!-- <view class="rowItem">{{ item.deviceId }}</view> -->
						<view
							:class="{
								rowItem: true,
								hasBinding: item.status == '已绑定',
								abnormal: item.status == '异常',
								unBinding: item.status == '未绑定'
							}"
						>
							<text v-if="item.status == '已绑定'">已绑定</text>
							<text v-if="item.status == '未绑定'">未绑定</text>
							<text v-if="item.status == '异常'">异常</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getAllocationRecordDetail } from '@/api/deviceAllocation.js';

// 获取路由参数
const routeParams = ref({});
onLoad((options) => {
	console.log(options);
	routeParams.value = options;
	
	pageTitle.value = options.allocateType == 'device' ? '机柜详情' : '充电宝详情';
	getAllocationRecordDetailFun();
});

// 获取详情数据
const AllocationRecordDetail = ref({});
const getAllocationRecordDetailFun = async () => {
	let res = await getAllocationRecordDetail({
		uuid: routeParams.value.uuid,
		deviceType: routeParams.value.allocateType == 'device' ? 0 : 1,
	})
	
	if (res.code == 200) {
	    AllocationRecordDetail.value = res.data;
	  }
};

// 页面标题
const pageTitle = ref('');
</script>

<style lang="scss" scoped>
.allocateDetail-container {
	min-height: calc(100vh - 188rpx);
	padding: 24rpx;
	background-color: #f9f9f9;

	.total-box {
		color: #999;
		font-size: 28rpx;
		margin-bottom: 24rpx;

		.total-box-num {
			color: #00c582;
		}
	}

	.detail-box {
		border-radius: 24rpx;
		overflow: hidden;
		background-color: #fff;
		margin-bottom: 24rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.device-headerBox {
			display: flex;
			align-items: center;
			color: #333;
			height: 88rpx;
			font-size: 28rpx;
			padding-left: 24rpx;
			background: linear-gradient(90deg, #e1f8f0, #fff);
		}

		.infoBox {
			padding: 0 24rpx 32rpx;

			.detailRow {
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;

				.rowItem {
					color: #333;
					font-size: 28rpx;
					line-height: 40rpx;
					margin-top: 24rpx;
					white-space: nowrap;

					&:last-child {
						width: 3em;
					}
				}

				.hasBinding {
					color: #00c582;
				}

				.abnormal {
					color: #fe4033;
				}

				.unBinding {
					color: #999;
				}

				span {
					white-space: nowrap;
				}
			}

			.detail-title {
				display: flex;
				align-items: center;
				height: 100rpx;
				border-bottom: 2rpx solid #f0f0f0;

				.rowItem {
					margin-top: 0;
				}
			}
		}
	}
}
</style>
